<template>
  <div>
    <div class="filter-container" style="margin: 40px; padding:20px;display: flex;align-items: center;">
      <el-button class="filter-item"  type="primary"  slot="append" icon="el-icon-download" @click="download()">
        下载模版
      </el-button>
      <el-upload class="upload-demo" style="display: flex;" :on-success="handleSuccess" :before-upload="beforeUpload"
        action="https://sh.funcnum.com/index/excel/import_class">
        <el-button type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <div class="filter-container" style="margin: 60px;display: flex;align-items: center;">
      <el-input style="width: 400px;" class="input-with-select" placeholder="请输入教师姓名" v-model="searchName"
        @keyup.enter.native="query()">
      </el-input>
      <el-button  :span = "12" class="filter-item" type="primary" style="width: 200px;" slot="append" icon="el-icon-search" @click="query()">
        搜索
      </el-button>

    </div>

    

  <!--  <div>
      <div><span>当前新数据：{{message.total}}</span> <span>输机成功条数：{{message.complete}}</span>
        <span>输机失败条数：{{message.failure}} （失败数据可在详情修改、修改后变成新数据）</span>
      </div>
      <el-progress :text-inside="true" :stroke-width="24" :percentage="percentage" status="success"></el-progress>
      <el-button class="filter-item" type="small" slot="append" icon="el-icon-search" @click="begin()">
        开始输机
      </el-button>

    </div> -->
    <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="tableData" style="margin: 20px;"
      max-height="800px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="id" label="序号" width="50" align="center">
      </el-table-column>
     <!-- <el-table-column prop="status" label="标签" width="100"
        :filters="[{ text: '新数据', value: 0 }, { text: '已经建档', value: 1 },{ text: '失败数据', value: 2 }]" :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == '0' ? 'primary' : 'success'"
            disable-transitions>{{ formatStatus( scope.row.status)}}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column prop="week" label="周次" width="100" align="center">
      </el-table-column>
      <el-table-column prop="weekend" label="星期" width="100" align="center">
      </el-table-column>
      <el-table-column prop="class_date" label="日期" width="100" align="center">
      </el-table-column>
      <el-table-column prop="section" label="节次" width="100" align="center">
      </el-table-column>
      <el-table-column prop="class_name" label="课程名称" width="100" align="center">
      </el-table-column>
      <el-table-column prop="class_content" label="授课内容" width="250" align="center">
      </el-table-column>
      <el-table-column prop="teacher" label="主讲老师" width="100" align="center">
      </el-table-column>
      <el-table-column prop="teacher_title" label="职称" width="100" align="center">
      </el-table-column>
      <el-table-column prop="class_class" label="授课班级" width="100" align="center">
      </el-table-column>
      <el-table-column prop="class_room" label="教室" width="100" align="center">
      </el-table-column>
      <el-table-column prop="teacher_way" label="授课方式" width="100" align="center">
      </el-table-column>
      <el-table-column prop="department" label="所在临床科室" width="100" align="center">
      </el-table-column>
      <el-table-column prop="research_section" label="所属教研室" width="100" align="center">
      </el-table-column>


    <!--  <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="yes(scope.$index, scope.row)">详情</el-button>
           <el-button type="danger" @click="delete_button(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column> -->

    </el-table>

    <div class="pagectn">
      <el-pagination :page-size="10" layout="total, prev, pager, next, jumper" :total="pages"
        @current-change="pagechange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
 
  import {
    time
  } from "echarts";
  export default {
    data() {
      let $domain = process.env.VUE_APP_BASE_API;
      return {
        tableData: [], //表格数据
        searchName: "", //搜索名
        pages: 0,
        domain: $domain,
        thispage: 1,
        percentage: 0,
        total: 0,
        fileList: '',
        ws: "",
        message: {}
      };
    },
    created() {

      this.requestuser(1);
      this.requestpage();
    },
    methods: {
      connectWebSocket(ws) {
        console.log("连接WebSocket");
        let _that = this;
        // 建立 WebSocket 连接
        let url = "ws://127.0.0.1:8080" + ws
        var ws = new WebSocket(url);

        ws.onopen = function(e) {
          console.log("连接服务器成功");
          // 向服务器发送消息
          ws.send("来自客户端的消息");
        }
        ws.onclose = function(e) {
          console.log("服务器关闭");
        }
        ws.onerror = function() {
          console.log("连接出错");
        }
        // 接收服务器的消息
        ws.onmessage = function(e) {
          _that.message = JSON.parse(e.data);
          console.log("message:", _that.message);
          _that.percentage = _that.message.complete / _that.message.total * 100
          // document.getElementById('test').innerHTML = message
        }

      },
      download() {
        const a = document.createElement('a');
        a.href = 'https://sh.funcnum.com/index/excel/class_download';
        a.download = 'Sample-Paper-PRE-bundle.docx';
        // 障眼法藏起来a标签
        a.style.display = 'none';
        // 将a标签追加到文档对象中
        document.body.appendChild(a);
        // 模拟点击了<a>标签,会触发<a>标签的href的读取,浏览器就会自动下载了
        a.click();
        // 一次性的,用完就删除a标签
        a.remove();
      },
      formatStatus(val) {
        var formats = {
          '0': '新数据',
          '1': '已建档',
          '2': '失败数据',
        };
        return formats[val];
      },
      handleSuccess(response, file, fileList) {
        console.log('response', response);
        this.fileList = fileList;
        let message = response.message

        this.$message({
          message: message,
          type: 'success'
        });

        this.requestuser(1);
        this.requestpage();
      },
      handleError(error, file, fileList) {
        this.fileList = fileList;
        this.$message({
          message: '上传失败',
          type: 'error'
        });
      },
      beforeUpload(file) {
        console.log('file:', file);
        const xls = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.ms-excel';
        const isLt500K = file.size < 50000000;

        if (!xls) {
          this.$message.error('上传文件只能是 xls 格式!');
        }
        if (!isLt500K) {
          this.$message.error('上传图片大小不能超过 50M!');
        }
        this.$message({
          message: '上传成功',
          type: 'success'
        });


      },
      query() {
        let _that = this;
        let data = {
          field: "id",
          name: _that.searchName,
          value:0,
          op: ">",
          order_by: "id",
          page: 1,
        }
        search(data).then((res) => {
          console.log('res:',res)
          _that.tableData = res
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      begin() {
        let _that = this;
        let data = {
          "sys": {
            "auth": {
              "uid": "802036",
              "pwd": "888888",
              "kwd": "责任医生"
            },
            "host": "88.249.1.56",
            "port": 19096
          },
          "res": {
            "auth": {
              "uid": "802036",
              "pwd": "888888",
              "kwd": "责任医生"
            },
            "host": "88.249.1.7",
            "port": 18081
          },
          "q": {
            "datetime": "2023-03-26"
          }
        }
        beginInput(data).then((res) => {
          console.log("res:", res)
          _that.total = res.total
          _that.ws = res.ws
          this.connectWebSocket(_that.ws); // 建立 WebSocket 连接
        })
      },
      //请求页面第一个
      requestuser(pages) {
        let _that = this;
        let data = {
          field: "id",
          value: 0,
          op: ">",
          order_by: "cTime",
          page: pages,
        }
        getList(data).then((res) => {
          console.log("res:", res)
          _that.tableData = res;
        })
      },
      filterTag(value, row) {
        return row.status == value;
      },
      requestpage() {
        let _that = this
        let data = {
          field: "idcard",
          op: ">",
          value: 0,
        }
        usernum(data).then((res) => {
          _that.pages = res
        })
      },

      pagechange(page) {
        this.requestuser(page)
        this.thispage = page
      },
      yes(index, row) {
        console.log('index:', index, 'row:', row);
        this.$router.push({
          name: "report",
          query: {
            id: row.id,
          }
        })
      },
      delete_button(index, row){
          console.log('index:', index, 'row:', row);
         let _that = this;
         let data = {
            "auth":{
                  "uid":"802036",
                  "pwd":"888888",
                  "kwd":"责任医生"
              },
            "host":"88.249.1.56",
            "port":19096
         }
         deletedata(data).then((res) => {
           _that.tableData = res;
           console.log("res:", res)
         })
      }
    },
  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-bottom: 0;
    width: 100%;
    white-space: pre-line;
  }

  .idc {
    margin-right: 15px;
    width: 40%;
    height: 300px;
  }

  .pagectn {

    width: 100%;
    background-color: #fff;
    padding: 5px;
    z-index: 100;
  }

  .idcardbox {
    display: flex;
  }
</style>
